import { FC } from '../type'
import { getPanel } from '@violentmonkey/ui'
import { render } from 'solid-js/web'
import { IPanelOptions } from '@violentmonkey/ui/types/panel'
import globalCss from './styles.css'
import styles, { stylesheet } from './styles/ui.module.css'

export const renderPanel = (
  el: FC,
  opt: IPanelOptions = {},
) => {
  const panel = getPanel({
    theme: 'dark',
    style: [globalCss, stylesheet].join('\n'),
    className: styles.panel,
    ...opt,
  })
  panel.body.className = `${panel.body.className} ${styles.panelBody}`
  render(el, panel.body)
  return panel
}
